<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html,body{height:100%;}
        .cont{width:90%;height:90%;background: #000;margin: 0 auto;cursor: pointer;position: relative;}

        .fire{width:8px;height:16px;position: absolute;}

        .s_fire{width:8px;height:8px;border-radius:50%;position: absolute;}
    </style>
</head>
<body>
    <div class="cont"></div>
</body>
<script src="../move.js"></script>
<script>

    // 分析：烟花，元素运动

    // 创建元素
    // 运动到指定位置
    // 删除，再创建多个

    // 设计：
    // class Fire{
    //     constructor(){
    //         // 获取容器
    //     }
    //     createEle(){
    //         // 创建元素并插入，设置样式，设置初始位置
    //     }
    //     move(){
    //         // 运动到指定位置
    //             // 运动到终点后，删除，并创建多个
    //     }
    //     over(){
    //         xxx.remove()
    //         if(大烟花){
    //             new Fire()
    //         }
    //     }
    // }
    // cont.onclick = function(){
    //     new Fire({
    //         type:0,
    //         start:{
    //             x:0,y:0
    //         },
    //         target:{
    //             x:100,y:100
    //         }
    //     });
    // }


    // 类型：大，小
    // 初始位置：创建后的默认位置
        // x，y
    // 目标位置：运动结束的位置（被删除的位置）
        // x，y

    // 编程
    class Fire{
        constructor(ops){
            // 处理参数
            this.type = ops.type;
            this.start = ops.start;
            this.target = ops.target;
            this.className = ops.className;
            // 获取容器
            this.cont = document.querySelector(".cont")

            // 创建元素并插入，设置样式，设置初始位置
            this.createEle()
        }
        createEle(){
            // 创建元素
            this.ele = document.createElement("div");
            // 插入容器
            this.cont.appendChild(this.ele);
            // 设置class
            this.ele.className = this.className;
            // 设置背景色
            this.ele.style.background = randomColor();
            // 设置left
            this.ele.style.left = this.start.x + "px";
            // 设置top
            this.ele.style.top = this.start.y + "px";
            // 开始运动
            this.move()
        }
        move(){
            // 开始运动，运动目标为传入的参数
            move(this.ele, {
                left: this.target.x,
                top: this.target.y
            }, ()=>{
                // 运动到指定位置
                this.over()
            });
        }
        over(){
            // 删除
            this.ele.remove()
            // 创建多个之前，需要先判断是否是大烟花（小烟花删除后，不用再创建了）
            if(this.type === 0){
                // 随机小烟花的数量
                const num = random(10,20);
                // 创建多个
                for(let i=0;i<num;i++){
                    // 小烟花的初始位置，是大烟花的目标位置
                    // 小烟花的目标位置，是容器内的随机位置
                    new Fire({
                        type:1,
                        start:{
                            x: this.target.x,
                            y: this.target.y
                        },
                        target:{
                            x: random(0, this.cont.offsetWidth - 8),
                            y: random(0, this.cont.offsetHeight - 8)
                        },
                        className:"s_fire"
                    })
                }
            }
        }
    }

    // const cont = document.querySelector(".cont");
    // setInterval(()=>{
    //     const x = random(0, cont.offsetWidth-8);
    //     new Fire({
    //         type:0,
    //         start:{
    //             x,
    //             y: cont.offsetHeight - 16
    //         },
    //         target:{
    //             x,
    //             y: random(0, cont.offsetHeight-16)
    //         },
    //         className:"fire"
    //     });
    // }, 1000)


    const cont = document.querySelector(".cont");
    cont.onclick = function(eve){
        const e = eve || window.event;
        new Fire({
            type:0,
            start:{
                x:e.offsetX, y:cont.offsetHeight - 16
            },
            target:{
                x:e.offsetX, y:e.offsetY
            },
            className:"fire"
        });
    }
    

    function random(max,min){
        return Math.round(Math.random()*(max-min)+min)
    }
    function randomColor(){
        return `rgb(${random(0,255)},${random(0,255)},${random(0,255)})`;
    }
</script>
</html>